<!--
 * @Description: 登录
 * @Author: yeke
 * @Date: 2023-07-19 16:49:28
 * @LastEditors: 1960116313@qq.com 1960116313@qq.com
 * @LastEditTime: 2023-10-24 15:53:53
-->
<template>
  <view class="login">
    <view class="login-logo">
      <u-image width="450rpx" height="450rpx" src="@/static/tk.jpg"></u-image>
    </view>
    <view class="container">
      <u-tabs
        bg-color="rgba(0,0,0,0)"
        bar-width="180"
        name="label"
        :list="tabsList"
        :is-scroll="false"
        :current="tabActive"
        @change="change"
      ></u-tabs>
      <login-mobile
        v-show="tabsList[tabActive].value === 'mobile'"
      ></login-mobile>
      <login-account
        v-show="tabsList[tabActive].value === 'account'"
      ></login-account>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { userStore } from "@/store/user/user";
import LoginAccount from "./components/login-account/index.vue";
import LoginMobile from "./components/login-mobile/index.vue";
const userStores = userStore();
const tabActive = ref(0);
const tabsList = [
  {
    label: "账号密码",
    value: "account",
  },
  {
    label: "验证码",
    value: "mobile",
  },
];

const change = (index) => {
  tabActive.value = index;
};
onLoad(async (options) => {
  if (userStores.isLogin) {
    // 已经登录 => 首页
    uni.reLaunch({
      url: "/pages/index/index",
    });
    return;
  }
});
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.login {
  height: 100%;
  padding-top: 120rpx;
  .login-logo {
    // padding-top: 30%;
    // padding-bottom: 20%;
    display: flex;
    justify-content: center;
  }
  .container {
    padding: 0 40rpx;
  }
}
</style>
